{% extends "base.html" %}

{% block title %}抢票 - 大麦抢票助手{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">演出搜索</h5>
                <span class="badge bg-secondary" id="loginStatus">
                    <span class="status-indicator status-offline"></span>未登录
                </span>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="keyword" class="form-label">关键词搜索</label>
                        <input type="text" class="form-control" id="keyword" placeholder="演出名称、艺人、场馆">
                    </div>
                    <div class="col-md-3">
                        <label for="city" class="form-label">城市</label>
                        <select class="form-select" id="city">
                            <option value="">全部城市</option>
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                            <option value="广州">广州</option>
                            <option value="深圳">深圳</option>
                            <option value="成都">成都</option>
                            <option value="杭州">杭州</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label for="category" class="form-label">分类</label>
                        <select class="form-select" id="category">
                            <option value="">全部分类</option>
                            <option value="演唱会">演唱会</option>
                            <option value="话剧歌剧">话剧歌剧</option>
                            <option value="音乐会">音乐会</option>
                            <option value="体育赛事">体育赛事</option>
                        </select>
                    </div>
                </div>
                <div class="mt-3">
                    <button class="btn btn-primary" id="searchBtn">
                        <i class="fas fa-search me-2"></i>搜索演出
                    </button>
                </div>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0">搜索结果</h5>
            </div>
            <div class="card-body">
                <div id="searchResults" class="text-center text-muted py-5">
                    <i class="fas fa-search fa-3x mb-3"></i>
                    <p>请输入关键词搜索演出</p>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">抢票设置</h5>
            </div>
            <div class="card-body">
                <form id="ticketForm">
                    <div class="mb-3">
                        <label for="selectedShow" class="form-label">选择演出</label>
                        <input type="text" class="form-control" id="selectedShow" readonly placeholder="请先搜索并选择演出">
                    </div>
                    
                    <div class="mb-3">
                        <label for="session" class="form-label">场次选择</label>
                        <select class="form-select" id="session" disabled>
                            <option value="">请先选择演出</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="priceRange" class="form-label">价位选择</label>
                        <select class="form-select" id="priceRange" disabled>
                            <option value="">请先选择场次</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="ticketCount" class="form-label">购票数量</label>
                        <select class="form-select" id="ticketCount">
                            <option value="1">1张</option>
                            <option value="2">2张</option>
                            <option value="3">3张</option>
                            <option value="4">4张</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="rushTime" class="form-label">开抢时间</label>
                        <input type="datetime-local" class="form-control" id="rushTime">
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="autoSubmit">
                            <label class="form-check-label" for="autoSubmit">
                                自动提交订单
                            </label>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary w-100" id="startRushBtn" disabled>
                        <i class="fas fa-rocket me-2"></i>开始抢票
                    </button>
                </form>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">抢票日志</h6>
            </div>
            <div class="card-body" style="max-height: 300px; overflow-y: auto;">
                <div id="rushLog" class="small text-muted">
                    <div>系统初始化完成</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 演出详情模态框 -->
<div class="modal fade" id="showDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">演出详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="showDetailContent">
                <!-- 动态加载内容 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="selectShowBtn">选择此演出</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 检查登录状态
async function checkLoginStatus() {
    try {
        const response = await axios.get('/api/auth/status');
        const statusBadge = document.getElementById('loginStatus');
        if (response.data.loggedIn) {
            statusBadge.innerHTML = '<span class="status-indicator status-online"></span>已登录';
            statusBadge.className = 'badge bg-success';
        }
    } catch (error) {
        console.error('检查登录状态失败:', error);
    }
}

// 搜索演出
document.getElementById('searchBtn').addEventListener('click', async () => {
    const keyword = document.getElementById('keyword').value;
    const city = document.getElementById('city').value;
    const category = document.getElementById('category').value;
    
    const searchBtn = document.getElementById('searchBtn');
    searchBtn.disabled = true;
    searchBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>搜索中...';
    
    try {
        const response = await axios.get('/api/ticket/search', {
            params: { keyword, city, category }
        });
        
        displaySearchResults(response.data.shows);
    } catch (error) {
        console.error('搜索失败:', error);
        document.getElementById('searchResults').innerHTML = `
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-circle me-2"></i>
                搜索失败，请重试
            </div>
        `;
    } finally {
        searchBtn.disabled = false;
        searchBtn.innerHTML = '<i class="fas fa-search me-2"></i>搜索演出';
    }
});

// 显示搜索结果
function displaySearchResults(shows) {
    const resultsDiv = document.getElementById('searchResults');
    
    if (!shows || shows.length === 0) {
        resultsDiv.innerHTML = `
            <div class="text-center text-muted py-5">
                <i class="fas fa-search fa-3x mb-3"></i>
                <p>未找到相关演出</p>
            </div>
        `;
        return;
    }
    
    let html = '<div class="row">';
    shows.forEach(show => {
        html += `
            <div class="col-md-6 mb-3">
                <div class="card">
                    <div class="row g-0">
                        <div class="col-4">
                            <img src="${show.poster}" class="img-fluid rounded-start" alt="${show.name}">
                        </div>
                        <div class="col-8">
                            <div class="card-body">
                                <h6 class="card-title">${show.name}</h6>
                                <p class="card-text small text-muted">
                                    <i class="fas fa-map-marker-alt me-1"></i>${show.venue}<br>
                                    <i class="fas fa-calendar me-1"></i>${show.date}<br>
                                    <strong class="text-primary">¥${show.minPrice}起</strong>
                                </p>
                                <button class="btn btn-sm btn-primary" onclick="showDetail('${show.id}')">
                                    查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    });
    html += '</div>';
    
    resultsDiv.innerHTML = html;
}

// 显示演出详情
async function showDetail(showId) {
    try {
        const response = await axios.get(`/api/ticket/show/${showId}`);
        const show = response.data;
        
        document.getElementById('showDetailContent').innerHTML = `
            <div class="row">
                <div class="col-md-4">
                    <img src="${show.poster}" class="img-fluid rounded" alt="${show.name}">
                </div>
                <div class="col-md-8">
                    <h4>${show.name}</h4>
                    <p><strong>时间：</strong>${show.date} ${show.time}</p>
                    <p><strong>地点：</strong>${show.venue}</p>
                    <p><strong>地址：</strong>${show.address}</p>
                    <p><strong>票价：</strong>${show.priceRange}</p>
                    <p><strong>状态：</strong><span class="badge ${show.status === '售票中' ? 'bg-success' : 'bg-warning'}">${show.status}</span></p>
                </div>
            </div>
        `;
        
        document.getElementById('selectShowBtn').onclick = () => selectShow(show);
        
        const modal = new bootstrap.Modal(document.getElementById('showDetailModal'));
        modal.show();
    } catch (error) {
        console.error('获取演出详情失败:', error);
    }
}

// 选择演出
function selectShow(show) {
    document.getElementById('selectedShow').value = show.name;
    
    // 加载场次
    loadSessions(show.id);
    
    const modal = bootstrap.Modal.getInstance(document.getElementById('showDetailModal'));
    modal.hide();
}

// 加载场次
async function loadSessions(showId) {
    try {
        const response = await axios.get(`/api/ticket/sessions/${showId}`);
        const sessions = response.data;
        
        const sessionSelect = document.getElementById('session');
        sessionSelect.innerHTML = '<option value="">请选择场次</option>';
        sessions.forEach(session => {
            sessionSelect.innerHTML += `<option value="${session.id}">${session.date} ${session.time} - ${session.description}</option>`;
        });
        sessionSelect.disabled = false;
    } catch (error) {
        console.error('加载场次失败:', error);
    }
}

// 初始化
checkLoginStatus();
</script>
{% endblock %}